<template>
	<view class="box">

		<image src="https://web.78keji.cn/images/tcxcx/backx.png" mode="widthFix" style="width: 100%;"></image>
		<view class="" style="width: 100%;">
			<view class="boss">
				<view class="" style="padding: 0 24rpx;">
					输入车牌缴费
				</view>
				<view class="" style="padding: 0 24rpx;">
					<keyboard-plate ref="plateNumber" :hobby="hobby" :plateNum.sync='plateNum' @change="getPlateNum"
						class="keyboard" isShow></keyboard-plate>
				</view>
				<view class="button" @click="cx">
					查询停车费
				</view>

				<view class="text">
					自动同步车辆至车主档案，下次无需手动输入
				</view>
			</view>
			<view class="boss1">
				<view class="" style="padding: 0 20rpx;">
					常用功能
				</view>
				<!-- 
				审核不通过隐藏
				<view class="d_f j_c_b" style="margin-top: 24rpx;">
					<image src="https://web.78keji.cn/images/tcxcx/tc1.png" mode="widthFix"
						style="width: 318rpx;margin-left: 24rpx;" v-if="!is"></image>
					<image src="https://web.78keji.cn/images/tcxcx/tc2.png" mode="widthFix"
						style="width: 318rpx;margin-left: 18rpx;" v-if="!is"></image>
				</view> -->
				<view class="d_f j_c_s_b  " style="padding: 24rpx;align-items: center;">
					<view class="" @click="oder">
						<view class="" style="text-align: center;">
							<image src="https://web.78keji.cn/images/tcxcx/dingdan.png" mode="widthFix"
								style="width: 38rpx;"></image>
						</view>

						<view class="">
							我的订单
						</view>
					</view>
					<view class="" @click="yh">
						<view class="" style="text-align: center;">
							<image src="https://web.78keji.cn/images/tcxcx/youhui.png" mode="widthFix"
								style="width: 38rpx;"></image>
						</view>

						<view class="">
							优惠券
						</view>
					</view>
					<view class="" @click="car">
						<view class="" style="text-align: center;">
							<image src="https://web.78keji.cn/images/tcxcx/car.png" mode="widthFix"
								style="width: 46rpx;"></image>
						</view>

						<view class="">
							我的车辆
						</view>
					</view>

					<view class="" @click="kefu">
						<view class="" style="text-align: center;">
							<image src="https://web.78keji.cn/images/tcxcx/kefu.png" mode="widthFix"
								style="width: 38rpx"></image>
						</view>

						<view class="">
							联系客服
						</view>
					</view>
				</view>


			</view>


		</view>

	</view>
</template>
<script>
	import commonApi from '../../api/commonApi.js'
	import {
		getid,
		getnew,
		sendSms,
		loginx,
		getBanner
	} from '../../api/index.js'



	export default {
		data() {

			return {
				platevalue: "", //车牌
				plateNum: '',
				length: 0,
				is: "",
				hobby: "",
				lists: []

			}
		},
		components: {

		},
		onLoad(option) {


			getBanner().then((res) => {
				console.log(res)
				this.lists = res.data.list5
			})

			commonApi.isVerify(res => {
				this.is = res
			})
		},
		methods: {
			changes(e) {
				console.log(e) //h5链接
				// 	//支付宝蚂蚁保（免费领5元话费立减金）
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
						"alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode="
					) +
					encodeURIComponent(encodeURIComponent(e))
				my.ap.navigateToAlipayPage({
					path: link
				})
			},
			xl() {
				my.openEmbeddedMiniProgram({
					appId: '2021004129621025',
					path: 'pages/unit/unit?a=e945f04cb73704f294a9186be28a5694',
					success: (res) => {
						console.log(JSON.stringify(res))
					},
					fail: (res) => {
						console.log(JSON.stringify(res))
					}
				});
			},
			cx() {
				console.log(this.platevalue)
				if (this.platevalue.length < 7) {
					uni.showToast({
						title: '输入正确的车牌',
						icon: 'error', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else if (this.platevalue == '川A12345') {
					uni.navigateTo({
						url: '/pages/my_order/my_order?plate=川A12345'
					})
				} else {
					uni.showToast({
						title: '无费用',
						icon: 'error', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				}
			},
			//获取车牌
			getPlateNum(e) {
				console.log(e,9999)
				this.platevalue = e.value
			},
			oder() {
				uni.navigateTo({
					url: '/pages/my_order/my_order'
				})
			},
			yh() {
				uni.navigateTo({
					url: '/pages/my_coupon/my_coupon'
				})

			},
			car() {
				console.log(21)
				uni.navigateTo({
					url: '/pages/my_car/my_car'
				})

			},
			kefu() {
				uni.makePhoneCall({
					phoneNumber: "40008825010", //电话号码
					success(ress) {
						console.log("拨打电话成功", ress)
					},
					fail(err) {
						console.log("拨打电话失败", 'err')
					}

				})
			}
		},

		onUnload() {

		},

		onShow() {

			if (uni.getStorageSync('listx')) {
				console.log(uni.getStorageSync('listx')[0].label)
				if (uni.getStorageSync('listx')[0].label.value) {
					this.hobby = uni.getStorageSync('listx')[0].label.value
				} else {
					this.hobby = uni.getStorageSync('listx')[0].label
				}
				console.log(this.hobby)



			}


		},


		watch: {
			plateNum(e) {
				this.length = e.length
				console.log(e.length, e)
				this.platevalue = e
			}

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.box {
		position: relative;
		min-height: 100%;
		background-color: #F5F5F5;
		z-index: 1;

	}

	.boss {
		position: absolute;
		padding-top: 24rpx;
		background-color: white;

		width: 702rpx;
		background: #FFFFFF;
		border-radius: 12rpx;

		margin-top: -230rpx;
		padding-bottom: 24rpx;
		margin-left: 24rpx;

	}

	.boss1 {
		position: absolute;
		padding-top: 24rpx;
		background-color: white;
		width: 702rpx;
		margin-top: 210rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 24rpx;


		padding-bottom: 24rpx;

	}

	.bossx {
		position: absolute;
		padding-top: 24rpx;

		width: 702rpx;
		margin-top: 580rpx;

		border-radius: 12rpx;
		margin-left: 24rpx;


		padding-bottom: 24rpx;
	}

	.button {
		width: 654rpx;
		height: 90rpx;
		background: #167BFF;
		border-radius: 6rpx;
		color: white;
		display: flex;

		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.text {
		font-size: 24rpx;
		color: #808080;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;

	}
</style>